import React, { useState,useRef } from 'react';
import { Tabs, Card, Button } from 'antd';
import DocArchiveTable from './DocArchiveTable';
import styles from './docArchive.module.css';

const DocArchiveBase: React.FC = () => {
  const [activeTab, setActiveTab] = useState('system');
  const childAdd = useRef(null)
	const add = () =>{
		if(childAdd.current){
			setTimeout(function(){
				childAdd.current?.showModal();
			},100)
		}
	}
	const operations = <Button onClick={add}>新增</Button>
  return (
    <Card className={styles.docArchiveBaseCard}>
      <Tabs
        activeKey={activeTab}
        onChange={setActiveTab}
        items={[
          { key: 'system', label: '系统知识库' },
          { key: 'personal', label: '个人知识库' },
          { key: 'favorite', label: '我的收藏' }
        ]}
        className={styles.docArchiveTabs}
		tabBarExtraContent={operations}
      />
      <div className={styles.docArchiveTableWrapper}>
        <DocArchiveTable ref={childAdd} type={activeTab} />
      </div>
    </Card>
  );
};

export default DocArchiveBase;